<template>
	<view>
		<view class="image-container">
			<view class="image-card">
				<image class="id-image" :src="frontPicture" mode="aspectFit"></image>
				<button @click="chooseFront" type="primary" size="mini">上传身份证正面</button>
			</view>
			<view class="image-card">
				<image class="id-image" :src="backPicture" mode="aspectFit"></image>
				<button @click="chooseBack" type="primary" size="mini">上传身份证反面</button>
			</view>
		</view>
		<!-- <view>{{ frontDebug }}</view> -->
		<!-- <view>xx{{ backDebug }}</view> -->

		<!-- 	<view>{{ idCard }}</view> -->
		<view class="id-card-container">
			<uni-card title="身份证信息">
				<!-- 用户名 -->
				<uni-forms-item label="姓名">
					<uni-easyinput v-model="idCard.username" placeholder="请输入姓名" :disabled="readonly" />
				</uni-forms-item>

				<!-- 身份证号 -->
				<uni-forms-item label="身份证号">
					<uni-easyinput v-model="idCard.idcard" placeholder="请输入身份证号" :disabled="readonly" />
				</uni-forms-item>

				<!-- 地址 -->
				<uni-forms-item label="地址">
					<uni-easyinput type="textarea" v-model="idCard.address" placeholder="请输入地址" :disabled="readonly" />
				</uni-forms-item>

				<!-- 生日 -->
				<uni-forms-item label="生日">
					<uni-easyinput v-model="idCard.birthday" :disabled="readonly" />
				</uni-forms-item>

				<!-- 性别 -->
				<uni-forms-item label="性别">
					<uni-easyinput v-model="idCard.gender" :disabled="readonly" />
				</uni-forms-item>

				<!-- 民族 -->
				<uni-forms-item label="民族">
					<uni-easyinput v-model="idCard.nation" :disabled="readonly" />
				</uni-forms-item>
				<!-- 有效期 -->
				<uni-forms-item label="有效期">
					<uni-easyinput v-model="idCard.period" :disabled="readonly" />
				</uni-forms-item>
			</uni-card>
		</view>
		<button @click="submit">保存&下一步</button>
		<!-- <navigator url="/pages/com-license/com-license">
			<button @click="test">开发专用 下一步</button>
		</navigator> -->
	</view>
</template>

<script>
import { idCardOcrFront, idCardOcrBack } from '@/api/companyApi.js';
import { saveCurrentIdCard } from '@/api/idCardApi.js';
export default {
	data() {
		return {
			frontPicture: '',
			backPicture: '',
			frontDebug: null,
			backDebug: null,
			idCard: {
				username: '',
				idcard: '',
				address: '',
				birthday: '',
				gender: '',
				nation: '',
				period: '',

				id: 0,
				comId: 0
			},
			readonly: true
		};
	},
	methods: {
		async chooseFront() {
			const res = await uni.chooseImage({
				count: 1,
				sourceType: ['album', 'camera']
			});
			console.log(res);
			console.log(res.tempFilePaths[0]);
			this.frontPicture = res.tempFilePaths[0];
			const res2 = await idCardOcrFront(this.frontPicture);
			console.log(res2);
			this.frontDebug = res2;
			this.idCard.username = res2.words_result.姓名.words;
			this.idCard.address = res2.words_result.住址.words;
			this.idCard.birthday = res2.words_result.出生.words;
			this.idCard.gender = res2.words_result.性别.words;
			this.idCard.nation = res2.words_result.民族.words;
			this.idCard.idcard = res2.words_result.公民身份号码.words;
		},
		async chooseBack() {
			const res = await uni.chooseImage({
				count: 1
			});
			console.log(res);
			console.log(res.tempFilePaths[0]);
			this.backPicture = res.tempFilePaths[0];
			const res2 = await idCardOcrBack(this.backPicture);
			console.log(res2);
			console.log(res2.words_result);
			this.backDebug = res2.words_result;
			this.idCard.period = res2.words_result.签发日期.words + '-' + res2.words_result.失效日期.words;
		},
		async submit() {
			console.log('待提交的数据', this.idCard);
			const res = await saveCurrentIdCard(this.idCard);
			console.log('保存成功', res);
			Object.assign(this.idCard, res);
			// 跳转页面下一步
			uni.navigateTo({
				url: '/pages/com-license/com-license'
			});
		}
	}
};
</script>

<style>
.id-card-container {
	padding: 20rpx;
}

.button-group {
	display: flex;
	justify-content: space-between;
	margin-top: 30rpx;
}

.save-btn {
	flex: 1;
	margin-right: 20rpx;
	background-color: #007aff;
	color: white;
}

.cancel-btn {
	flex: 1;
	margin-left: 20rpx;
	background-color: #dd524d;
	color: white;
}

/* 只读模式下的样式 */
:deep(.is-disabled) {
	background-color: #f5f7fa !important;
	color: #909399 !important;
}
.id-image {
	width: 160rpx;
	height: 160rpx;
}
.image-container {
	display: flex;
}
.image-card {
}
</style>
